<template>
  <base-context-menu
    :visible="menuVisible"
    :x="x"
    :y="y"
    :data="data"
    @update:visible="menuVisible = $event"
    @close="onClose"
  >
    <menu-item
      icon="View"
      label="浏览数据"
      command="browseData"
      @click="handleCommand"
    />
    <menu-item
      icon="Edit"
      label="设计表"
      command="designTable"
      @click="handleCommand"
    />
    <menu-item
      icon="Document"
      label="新建查询"
      command="newQuery"
      @click="handleCommand"
    />
    <menu-divider />
    <menu-item
      icon="Refresh"
      label="刷新"
      command="refresh"
      @click="handleCommand"
    />
  </base-context-menu>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'
import BaseContextMenu from '../BaseContextMenu.vue'
import MenuItem from '../MenuItem.vue'
import MenuDivider from '../MenuDivider.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  x: {
    type: Number,
    default: 0
  },
  y: {
    type: Number,
    default: 0
  },
  data: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:visible', 'command'])

const menuVisible = ref(props.visible)

// 监听props的变化
watch(() => props.visible, (newVal) => {
  menuVisible.value = newVal
})

// 监听内部状态的变化
watch(menuVisible, (newVal) => {
  emit('update:visible', newVal)
})

// 处理菜单命令
const handleCommand = ({ command }) => {
  emit('command', { command, data: props.data })
  menuVisible.value = false
}

// 菜单关闭事件
const onClose = () => {
  emit('update:visible', false)
}
</script> 